<template>
	<div class="trainGetSeat" @touchmove.prevent>
		<div class="trainGetSeat_box">
			<div class="trainGetSeat_header">
				<img src="http://h5.kpcx179.com/wximages/train/zhanzuotu@2x.png" alt="" />
			</div>
			<div class="trainGetSeat_content">
				<div class="trainGetSeat_content_message">
					<div class="trainGetSeat_content_city font_spill">
						<span class="trainGetSeat_content_cityName">{{msg.fromStation}}</span>
						<span>{{msg.startDate.time}}</span>
					</div>
					<div class="trainGetSeat_content_trainNo">
						<div>{{msg.startDate.day}}</div>
						<div class="trainGetSeat_content_pic">
							<img src="http://h5.kpcx179.com/wximages/train/daoda@2x.png" />
						</div>
						<div>{{msg.trainNo}}</div>
					</div>
					<div class="trainGetSeat_content_city right font_spill">
						<span class="trainGetSeat_content_cityName">{{msg.toStation}}</span>
						<span>{{msg.endDate.time}}</span>
					</div>
				</div>
				<div class="trainGetSeat_content_passengerList">
					<span>乘车人：</span>
					<span v-for="item,key in passengerList">
					<span v-if="key">、</span>
					<span>{{item.name || item.passengerName}}</span>
					</span>
				</div>
			</div>
			<div class="trainGetSeat_bottom">
				<div class="trainGetSeat_bottom_font">
					<span>正在为您占座，请耐心等待~</span>
					<span>{{progress}}%</span>
				</div>
				<div :style="{width:progress + '%'}" class="trainGetSeat_bottom_progress" :class="{active:progress==100}"></div>
			</div>
		</div>
	</div>
</template>
<style scoped>
	.trainGetSeat {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 350;
	}
	
	.trainGetSeat_box {
		height: 380px;
		width: 602px;
		border-radius: 10px;
		background: #fff;
	}
	
	.trainGetSeat_header {
		width: 100%;
		height: 150px;
	}
	
	.trainGetSeat_header>img {
		width: 100%;
		height: 100%;
	}
	
	.trainGetSeat_content {
		height: 150px;
		width: 100%;
		padding: 14px 18px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.trainGetSeat_bottom {
		height: 80px;
		width: 100%;
		font-size: 26px;
		color: #a0d17f;
		background-color: #e7ffd7;
		border-radius: 0px 0px 10px 10px;
		position: relative;
		top: 0;
		left: 0;
	}
	
	.trainGetSeat_bottom>.trainGetSeat_bottom_font {
		position: absolute;
		height: 100%;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32px;
		box-sizing: border-box;
		width: 100%;
		z-index: 5;
	}
	
	.trainGetSeat_bottom>.trainGetSeat_bottom_progress {
		position: absolute;
		height: 100%;
		background-color: #d2f8b8;
		border-radius: 0px 0px 0px 10px;
		top: 0;
		left: 0;
	}
	
	.trainGetSeat_bottom_progress.active {
		border-radius: 0px 0px 10px 10px;
	}
	
	.trainGetSeat_content_message {
		display: flex;
		justify-content: space-between;
	}
	
	.trainGetSeat_content_trainNo {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.trainGetSeat_content_city {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 26px;
		color: #333333;
		width: 35%;
	}
	
	.trainGetSeat_content_city.right {
		align-items: flex-end
	}
	
	.trainGetSeat_content_cityName {
		font-size: 28px;
		margin-bottom: 22px;
	}
	
	.trainGetSeat_content_pic {
		width: 158px;
		height: 9px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 5px 0;
	}
	
	.trainGetSeat_content_pic>img {
		width: 100%;
		height: 100%;
	}
	
	.trainGetSeat_content_passengerList {
		font-size: 24px;
		color: #b8b8b8;
	}
</style>
<script>
	export default {
		props: {
			msg: Object,
			passengerList: Array,
			orderNum: String
		},
		data() {
			return {
				progress: 0,
				timer: null, //下单延时器
				timers: null, //进度条定时器
			}
		},
		mounted() {
			this.get();
		},
		methods: {
			get(){
				this.timers = setInterval(function() {
					if(this.progress < 99) {
						var num = ~~(Math.random() * 5) + 1;//1到5随机
						this.progress += num;
						(this.progress > 99) && (this.progress = 99);
					} else {
						clearInterval(this.timers);
						this.$router.push({//跳等待
							name: 'trainOccupyingSeat',
							query: {
								orderNum:this.orderNum
							},
						});
					};
				}.bind(this), 500);
				this.getOrderDetail();
			},
			getOrderDetail() { //获取订单详情
				var param = {
					orderNum: this.orderNum,
					orderType: '3',
				};
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/localOrderDetail", param).then((res) => {
					if(res.data.Code == "0") { //验证成功下单
						var message = res.data.Result.trainOrderDetailInfo;
						if(message.orderStateCode == 'S' || message.orderStateCode == 'F') { //占座成功
							clearInterval(this.timers);
							this.progress = 99;
							this.$router.push({//跳转
								name:"trainPay",
								query: {
									orderNum:message.outOrderNo,
									changedType:message.changedType,//是否改签
									orderType:message.order_type,//订单类型
								},
							});
						} else if(message.orderStateCode == "B") { // 占座失败
							clearInterval(this.timer);
							this.$toast("占座失败", {
								durtaion: 200,
								location: 'center',
							});
							var timer = setTimeout(function() {
								clearTimeout(timer);
								this.$router.go(-1);
							}.bind(this), 1500);
						} else {
							this.timer = setTimeout(function() {
								clearTimeout(this.timer);
								this.getOrderDetail();
							}.bind(this), 2000);
						};
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					console.log(err);
				});
			},
		},
		created() {
//			console.log(this.orderNum);
		},
		watch: { //监听放置

		},
		filters: { //过滤

		},
		beforeDestroy() {//离开清除定时器
			clearTimeout(this.timer);
			clearInterval(this.timers);
		},
		components: {},
		computed: {}
	};
</script>